(function () {
    let template = function (self) {
        self.$uid = "switch_" + Math.random().toString(36).substring(3);
        return `<aux-view>${self.innerHTML}</aux-view>`;
    };

    document.auiDefineElement("aux-tab-navs", {
        template,
        props: {
        },
        
        created(self) {
            self.$ele.root = self.children[0];
            self.$activeIndex = self.$ele.root.children[0];
            self.$lastActiveIndex = self.$ele.root.children[0];     
            self.getTab = function(sel) {
                return self.$ele.root.auiFindSelector(`[aux-tab=${sel}]`)
            }      
        },
        attached(self) {
            self.$ele.root.auiOn("click", (e) => {    
                self.forTab = document.querySelector(`[aux-tab-navs="${self.getAttribute("for")}"]`);
                if (!self.forTab) {
                    throw new Error("tab not searched");
                }                       
                if (e.target) {
                    if (e.target.classList.contains("active")) {
                    } else {
                        var fel = Array.prototype.slice.call(self.$ele.root.children).indexOf(e.target);
                        self.forTab.selected = fel;
                        self.$activeIndex = e.target; 
                        e.target.auiAddOnceClass("active");
                        if (self.$lastActiveIndex) {
                            self.$lastActiveIndex.auiRemoveOnceClass("active");
                            self.$lastActiveIndex = e.target;    
                        } 
                    
                    }
                }
            }, {
                target: "aux-tab-nav"                
            });
        }

    });

    
})();


